<template>
    <div class="newfriendmsg">
        <div class="newfriendmsg-head">
            <div class="img">
                <img src="../../images/icon_bangding_01.png" alt="">
            </div>
                <h2>{{msg}}</h2>            
        </div>
            <div class="content">
                 <img src="../../images/icon_touxiang_04.png" alt="">

                 <div class="content_text">
                    <h2>蜜萌</h2>
                    <h2>女 18岁</h2>
                 </div>
                 <div class="guanzhu">
                    <div>已关注 </div>
                 </div>
            </div>
            <div class="content">
                 <img src="../../images/icon_touxiang_05.png" alt="">

                 <div class="content_text">
                    <h2>丫丫</h2>
                    <h2>女 18—35岁 混合性肌肤</h2>
                 </div>
                 <div class="guanzhu">
                    <div>已关注 </div>
                 </div>
            </div>
            <div class="content">
                 <img src="../../images/icon_touxiang_06.png" alt="">

                 <div class="content_text">
                    <h2>朵朵</h2>
                    <h2>女 18—35岁</h2>
                 </div>
                 <div class="guanzhu">
                    <div>关注ta </div>
                 </div>
            </div>
    </div>
</template>
<script>
    export default{
        name:'newfriendmsg',
        data(){
            return{
                msg:'新好友通知'
            }
        }       
    }
</script>

<style lang='less' scoped>
.newfriendmsg{
    width:750/75rem;
    height:80/75rem;
}
.newfriendmsg-head{
    width:750/75rem;
    height:80/75rem;
    background:#FF406F;
}
.newfriendmsg-head h2{
    float:right;
    font-size:36/75rem;
    line-height:80/75rem;
    color:#fff;
    margin-right:280/75rem;
}
.newfriendmsg-head .img{
    float:left;
    // width:750/75rem;
    height:36/75rem;
}
.newfriendmsg-head .img img{
    float:left;
    margin-left:20/75rem;    
    margin-top:26/75rem;
}
.content{
    width:750/75rem;
    height:154/75rem;
    background:#fff;
    margin-top:27/75rem;
    box-shadow:0 0 20px #D3C3C3
}
.content img{
    float:left;
    width:96/75rem;
    height:96/75rem;
    margin-top:29/75rem;
    margin-left:45/75rem;
    margin-right:20/75rem;
}
.content_text{
    float:left;
    // width:432/75rem;
    height:154/75rem;
     margin-top:26/75rem;
}
.content_text h2{
    font-size:24/75rem;
    text-align:left;
    line-height:50/75rem;
   
}
.guanzhu{
    float:right;
    width:110/75rem;
    height:40/75rem;
    line-height:40/75rem;
    border:2/75rem solid #FF3F6E;
    border-radius:30/75rem;
    font-size:22/75rem;
    margin-right:50/75rem;
    margin-top:63/75rem;
    text-align:center;
}
</style>